<template>
  <div>
  <router-view />
  </div>
</template>

<script lang='ts'>
import {provide,ref} from 'vue';
import {router} from './router';

export default {
  name: 'App',
  //有路由占位符后可不用component指向
  // components: {
  //   //相当于Ming:Ming
  //   Ming
  // }
  setup(){
    //获取初始的屏幕宽度
    const width=document.documentElement.clientWidth;
    //通过三元运算符来实现若是电脑则一直是true手机则是false(根据获取的屏幕宽度用来判断的标准为500px)
    const asideVisible=ref(width<=500?false:true);
    //提供给外部页面读取到变量
    provide('nav',asideVisible);  //set
    //移动端每次切换路由都不显示组件
    if (width <= 500){
    router.afterEach(() => {
      // to and from are both route objects.
      asideVisible.value=false;
      console.log('路由已切换');
    })
  }
  }
}
</script>
